<template>
  <div class="timer-div dowebok">
    <div class="timer">
      <div class="time-card" data-type="hours" data-max="24">
        <div class="time-card-count">{{myHours}}}</div>
        <div class="time-card-label">时</div>
      </div>
      <span class="colon">:</span>
      <div class="time-card" data-type="minutes" data-max="60">
        <div class="time-card-count">{{myMinutes}}</div>
        <div class="time-card-label">分</div>
      </div>
      <span class="colon">:</span>
      <div class="time-card" data-type="seconds" data-max="60">
        <div class="time-card-count">{{mySeconds}}</div>
        <div class="time-card-label">秒</div>
      </div>
    </div>
    <button  type="primary" round :disabled="isAbleStart" @click="testTimer()">计时开始</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      timeObj: null, // 时间对象,下方会用到
      myHours: '00', // 我定义来接收计算出来的 小时 的
      myMinutes: '00', // 我定义来接收计算出来的 分钟 的
      mySeconds: '00'// 我定义来接收计算出来的 秒钟 的
    }
  },
  created() {
    debugger
    this.loadData();
  },
  methods: {
    loadData(){
      this.loadParameter();
    },
    loadParameter(){
      console.log(this.$router);
    },
    testTimer() {
      console.log("sdf");
      this.timeFunction();
      setInterval(() => {
        this.timeFunction();
      }, 1000)
    }, timeFunction() {
      // 开始执行倒计时
      this.timeObj = { // 时间对象
        seconds: Math.floor(this.currentTime % 60),
        minutes: Math.floor(this.currentTime / 60) % 60,
        hours: Math.floor(this.currentTime / 60 / 60) % 24
      }
      // 计算出时分秒
      this.myHours = this.timeObj.hours < 10 ? '0' + this.timeObj.hours : this.timeObj.hours;
      this.myMinutes = this.timeObj.minutes < 10 ? '0' + this.timeObj.minutes : this.timeObj.minutes;
      this.mySeconds = this.timeObj.seconds < 10 ? '0' + this.timeObj.seconds : this.timeObj.seconds;
      this.currentTime++;
    }
  },
}
</script>
<style>
.dowebok {
  margin-top: 200px;
  align-items: center;
}
.timer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 0 4em;
  color: #151414;
}
.time-card {
  margin: 0 1em;
  text-align: center;
}
.time-card-count {
  font-weight: 600;
  font-size: 70px;
  width: 77px;
  height: 77px;
  line-height: 77px;
  overflow: hidden;
}
.time-card-label {
  font-size: 0.625em;
  text-transform: uppercase;
  opacity: 0.7;
}
.colon {
  font-size: 2em;
}
</style>
